<template>
	<div class="weui-tab my-tab">
		<div class="weui-tabbar">
			<div class="flex weui-tabbar__item my-weui-tabbar__item" v-for="(item, index) in menu[access].tabList" :key="index"
			 @click="selectNav(item)">
				<img :src="item.active" alt="" v-if="tabActive==item.path" class="weui-tabbar__icon" style="width: 2rem;height: 2rem;margin: 0;">
				<img :src="item.icon" alt="" v-else class="weui-tabbar__icon" style="width: 2rem;height: 2rem;margin: 0;">
				<p class="weui-tabbar__label" style="font-size: 1rem;">{{item.name}}</p>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			tab: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				access: '',
				showHide: false,
				tabActive: '',
				menu: {
					kindergarten: {
						tabList: [{
								name: '首页',
								path: '/home',
								icon: require('@/../static/img/index.png'),
								active: require('@/../static/img/index_a.png')
							},
							{
								name: '通知公告',
								path: '/announcement',
								icon: require('@/../static/img/notice.png'),
								active: require('@/../static/img/notice_a.png')
							},
							{
								name: '通讯录',
								path: '/phonebook',
								icon: require('@/../static/img/addressBooks.png'),
								active: require('@/../static/img/addressBooks_a.png')
							},
							{
								name: '我的',
								path: '/myself',
								icon: require('@/../static/img/mine.png'),
								active: require('@/../static/img/mine_a.png')
							}
						],
					},
					classMaster: {
						tabList: [{
								name: '首页',
								path: '/home',
								icon: require('@/../static/img/index.png'),
								active: require('@/../static/img/index_a.png')
							},
							{
								name: '通知公告',
								path: '/announcement',
								icon: require('@/../static/img/notice.png'),
								active: require('@/../static/img/notice_a.png')
							},
							{
								name: '通讯录',
								path: '/phonebook',
								icon: require('@/../static/img/addressBooks.png'),
								active: require('@/../static/img/addressBooks_a.png')
							},
							{
								name: '我的',
								path: '/myself',
								icon: require('@/../static/img/mine.png'),
								active: require('@/../static/img/mine_a.png')
							}
						],
					},
					kinsfolk: {
						tabList: [{
								name: '首页',
								path: '/home',
								icon: require('@/../static/img/index.png'),
								active: require('@/../static/img/index_a.png')
							},
							{
								name: '通知公告',
								path: '/announcement',
								icon: require('@/../static/img/notice.png'),
								active: require('@/../static/img/notice_a.png')
							},
							{
								name: '校园动态',
								path: '/classDaily',
								icon: require('@/../static/img/class.png'),
								active: require('@/../static/img/class_a.png')
							},
							{
								name: '我的',
								path: '/myself',
								icon: require('@/../static/img/mine.png'),
								active: require('@/../static/img/mine_a.png')
							},
						],
					}
				},
			}
		},
		methods: {
			selectNav(item) {
				this.tabActive = item.path;
				if (item.path == '') {
					this.showHide = true;
				} else {
					this.$router.push(item.path)
				}
			}
		},
		created() {
			this.access = this.$Cookies.get('loginType');
			this.tabActive = this.tab;
		}
	}
</script>

<style>
</style>
